<template>
    <div class="countdiv">
        <h2>目前的数值为:{{ sum }}</h2>
        <h2>使用Vuex中的getters:{{ bigSum }}</h2>
        <h2 style="color: rebeccapurple;">列表中共 {{ plist.length }} 人 </h2>
        <select v-model.number="selectN">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="Increment(selectN)">+</button>
        <button @click="Decrement(selectN)">-</button>
        <button @click="incrementOdd(selectN)">当前求和为奇数再加</button>
        <button @click="incrementWait(selectN)">等一等再加</button>
    </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
    name: 'CountModule',
    data() {
        return {
            selectN: 1,
        }
    },
    methods: {
        ...mapActions('CountModule', ['incrementOdd', 'incrementWait']),
        ...mapMutations('CountModule', ['Increment', 'Decrement']),
    },

    computed: {
        ...mapState('CountModule', ['sum']),
        ...mapGetters('CountModule', ['bigSum']),
        ...mapState('PersonModule', { plist: 'personList' })
    },
    watch: {

    },
    mounted() {
        console.log("store", this.$store)
    }
}
</script>
